// 客户服务
<template>
  <div class="CustomerService">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>
    <div class="w1920">
      <div class="w1200">
        <Home-notice></Home-notice>
        <div class="ww1200">
          <div class="linkGroupk">
            <h2 class>常用服务</h2>
            <ul class="linkGroup">
              <li v-for="item in serverIcon" :key="item.id" @click="jump1(item.id)">
                <span :class=" item.color == 1 ? 'green' :'' ">
                  <img :src="item.imgsrc">
                </span>
                <div>
                  <h3>{{item.title}}</h3>
                  <p>{{item.text}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="ww1200">
      <div class="CommonProblem">
        <h2>{{ CommonProblem.title }}</h2>
        <ol>
          <li v-for=" item in CommonProblem.content" :key="item.id">
            <h3>{{ item.minTitle }}</h3>
            <ul class="CommonProblemChildren">
              <li
                v-for="option in item.minContent"
                :key="option.id"
                @click="jump2(option.id)"
              >{{option.des}}</li>
            </ul>
          </li>
        </ol>
      </div>
      <!-- <div class="OnlineService">
        <h2>在线客服</h2>
        <p>在线客服：孚地客服为您答疑解惑</p>
        <el-button type="primary">
          <span>立即咨询</span>
          <i class="iconfont">&#xe63f;</i>
        </el-button>
      </div> -->
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>

<script>
import HomeNotice from "../home/components/HomeNotice"
import icon1 from "@/assets/serverIcon/icon1.png"
import icon2 from "@/assets/serverIcon/icon2.png"
import icon3 from "@/assets/serverIcon/icon3.png"
import icon4 from "@/assets/serverIcon/icon4.png"
import icon5 from "@/assets/serverIcon/icon5.png"
import icon6 from "@/assets/serverIcon/icon6.png"
import icon7 from "@/assets/serverIcon/icon7.png"
import icon8 from "@/assets/serverIcon/icon8.png"

export default {
  name: "CustomerService",

  data() {
    return {
      navindex: -1,
      serverIcon: [
        {
          imgsrc: icon1,
          title: "查询订单",
          text: "快速查看订单详情、配送进度、确认收货等 ",
          id: 0
        },
        {
          imgsrc: icon2,
          title: "取消订单",
          text: "申请取消订单、终止发货 ",
          id: 1
        },
        {
          imgsrc: icon3,
          title: "配送查询",
          text: "配送进度、确认收货等  ",
          id: 2
        },
        {
          imgsrc: icon4,
          title: "发票查询",
          text: "查询发票类型、开具详情  ",
          id: 3
        },
        {
          imgsrc: icon5,
          title: "报价单查询",
          text: "快速查看报价单 ",
          id: 4,
          color: 1
        },
        {
          imgsrc: icon6,
          title: "我的求购",
          text: "快速查看我的求购信息、以及回复情况 ",
          id: 5,
          color: 1
        },
        {
          imgsrc: icon7,
          title: "账户安全",
          text: "修改密码、绑定/换绑手机、提高账户安全等  ",
          id: 6,
          color: 1
        },
        {
          imgsrc: icon8,
          title: "申请售后",
          text: "快速查询退换货问题 ",
          id: 7,
          color: 1
        }
      ],
      CommonProblem: {
        title: "常见问题",
        content: [
          {
            minTitle: "金融服务问题",
            minContent: [
              {
                des: "账期服务",
                id: 0
              },
              {
                des: "退换货运费承担",
                id: 1
              },
              {
                des: "退款说明",
                id: 2
              }
            ]
          },
          {
            minTitle: "售后服务",
            minContent: [
              {
                des: "常见问题",
                id: 3
              }
            ]
          },
          {
            minTitle: "配送问题",
            minContent: [
              {
                des: "配送说明",
                id: 4
              },
              {
                des: "配送须知",
                id: 5
              },
              {
                des: "验货签收",
                id: 6
              },
              {
                des: "配送答疑",
                id: 7
              }
            ]
          },
          // ,{
          //     minTitle:'订单咨询',
          //     minContent:[
          //         {
          //             des : '订单咨询',
          //             id : 8
          //         }
          //     ]
          // }
          {
            minTitle: "发票问题咨询",
            minContent: [
              {
                des: "发票须知",
                id: 9
              }
            ]
          },
          {
            minTitle: "支付问题",
            minContent: [
              {
                des: "支付方式",
                id: 10
              }
            ]
          },
          {
            minTitle: "账户信息",
            minContent: [
              {
                des: "基本资料",
                id: 11
              }
            ]
          },
          {
            minTitle: "购物咨询",
            minContent: [
              {
                des: "购物流程",
                id: 12
              }
            ]
          }
        ]
      }
    }
  },

  methods: {
    // 常见服务跳转
    jump1(id) {
      switch (id) {
        case 0:
          this.$router.push({
            name: "FullOrder",
            params: {
              id: 1
            }
          })
          break
        case 1:
          this.$router.push({
            name: "FullOrder",
            params: {
              id: 1
            }
          })
          break
        case 2:
          this.$router.push({
            name: "FullOrder",
            params: {
              id: 1
            }
          })
          break
        case 3:
          this.$router.push({
            name: "MyInvoice",
            params: {
              id: 6
            }
          })
          break
        case 4:
          this.$router.push({
            name: "MyQuotation",
            params: {
              id: 3
            }
          })
          break
        case 5:
          this.$router.push({
            name: "MyWantBuy",
            params: {
              id: 7
            }
          })
          break
        case 6:
          this.$router.push({
            name: "MyCenter",
            params: {
              id: 0
            }
          })
          break
        case 7:
          this.$router.push({
              name:'AfterSale',
              params:{
                  id : 8
              }
          })
          break
      }
    },

    // 常见问题
    jump2(id) {
      console.log(id)
      switch (id) {
        case 0:
          this.$router.push({
            name: "AccountService",
            params: {}
          })
          break
        case 1:
          this.$router.push({
            name: "content11",
            params:{id:11}
          })
          break
        case 2:
          this.$router.push({
            name: "content12",
            params:{id:12}
          })
          break
        case 3:
          this.$router.push({
            name: "content5",
            params:{id:5}
          })
          break
        case 4:
          this.$router.push({
            name: "content6",
            params:{id:6}
          })
          break
        case 5:
          this.$router.push({
            name: "content7",
            params:{id:7}
          })
          break
        case 6:
          this.$router.push({
            name: "content8",
            params:{id:8}
          })
          break
        case 7:
          this.$router.push({
            name: "content9",
            params:{id:9}
          })
          break
        // case 8:
        //     this.$router.push({
        //         name :'footerDetails',
        //         params :{
        //             id : 9,
        //         }
        //     })
        // break
        case 9:
          this.$router.push({
            name: "content3",
            params:{id:3}
          })
          break
        case 10:
          this.$router.push({
            name: "content4",
            params:{id:4}
          })
          break
        case 11:
          this.$router.push({
            name: "MyCenter",
            params: {
              id: 0
            }
          })
          break
        case 12:
          this.$router.push({
            name: "footerDetails",
            params: {
              id: 1
            }
          })
          break
      }
    }
  },

  components: {
    HomeNotice
  }
}
</script>
<style lang="scss" scoped>
.CustomerService {
  .w1920 {
    width: 100%;

    // height: 270px;
    background: #0a83e7;
    padding: 0px;
    padding-top: 20px;
    .w1200 {
      width: 1200px;
      margin: auto;
      color: #fff;
    }
  }
  .ww1200 {
    width: 1200px;
    margin: auto;
    .linkGroupk {
      h2 {
        padding-left: 20px;
        line-height: 80px;
      }
      .linkGroup {
        width: 100%;
        height: 252px;
        // background: rgba($color: #dfd9d9, $alpha: .2);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 15px 0px;
        li {
          width: 300px;
          height: 126px;
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          span {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #36a4ff;
            margin: 0 25px;
            img {
              display: block;
              margin: auto;
              margin-top: 20px;
            }
            &:hover {
              img {
                transform: scale(1.16);
                transition: 0.3s;
              }
            }
          }
          .green {
            background: #65d476;
          }
          div {
            flex: 1;
            margin-right: 10px;
            p {
              color: #fff;
            }
          }
        }
      }
    }

    .CommonProblem {
      background: #fafafa;
      width: 100%;
      height: 286px;
      h2 {
        padding-left: 20px;
        line-height: 80px;
      }
      ol {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        li {
          width: 136px;
          text-align: center;
          h3 {
            line-height: 40px;
            background: #e5e5e5;
            font-size: 15px;
          }      
          .CommonProblemChildren {
            li {
              line-height: 24px;
              font-size: 14px;
              color: #626262;
              cursor: pointer;
              &:first-child {
                margin-top: 20px;
              }
              &:hover {
                color: #000;
              }
            }
          }
        }
      }
    }
    .OnlineService {
      h2 {
        padding-left: 20px;
        line-height: 80px;
      }
      p {
        padding-left: 20px;
        color: #8d8d8d;
        margin-bottom: 20px;
      }
      .el-button {
        margin-left: 20px;
        margin-bottom: 20px;
        span {
          letter-spacing: 2px;
        }
      }
    }
  }
}
</style>


